<div
  bsModal
  #actionModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="actionModal"
  aria-hidden="true"
  [config]="{ backdrop: 'static' }"
>
  <div class="modal-dialog" style="max-width: 1024px">
    <div class="modal-content">
      <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()">
        <div class="modal-header">
          <h4 class="modal-title">
            <span>匹配原材料信息</span>
          </h4>
          <button
            type="button"
            class="close"
            (click)="close()"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body boundmaterial">
          <div
            class="primeng-datatable-container"
            [busyIf]="primengTableHelper.isLoading"
          >
            <p-table
              #dataTable
              (onLazyLoad)="getmaterial($event)"
              [value]="charges"
              rows="5"
              [paginator]="false"
              dataKey="id"
              [scrollable]="true"
              ScrollWidth="100%"
              [responsive]="primengTableHelper.isResponsive"
              [resizableColumns]="primengTableHelper.resizableColumns"
            >
              <ng-template pTemplate="caption">
                <div class="row align-items-center m--margin-bottom-10">
                  <div class="col-xl-8">
                    <div
                      class="form-group m-form__group align-items-center mb-0"
                    >
                      <div class="input-group">
                        <input
                          class="form-control m-input"
                          autofocus
                          type="text"
                          name="filterText"
                          [(ngModel)]="filterText"
                          placeholder="搜索..."
                          style="width: auto"
                        />
                        <button
                          class="btn btn-success btn-sm"
                          type="button"
                          (click)="getmaterial()"
                        >
                          搜索
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </ng-template>
              <ng-template pTemplate="header">
                <tr>
                  <th style="width: 25px"></th>
                  <th width="80px">库存总量</th>
                  <th width="150px">任务号</th>
                  <th width="120px">图号</th>
                  <th width="100px">名称</th>
                  <th width="100px">炉批号</th>
                  <th width="100px">质检编号</th>
                  <th width="100px">牌号</th>
                  <th width="120px">合格证</th>
                  <th width="100px">物质编码</th>
                  <th width="100px">规格</th>
                  <th width="100px">尺寸</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-record let-expanded="expanded">
                <tr>
                  <td style="width: 25px">
                    <p-checkbox
                      name="group1"
                      value="{{ record.id }}"
                      [(ngModel)]="selected"
                    ></p-checkbox>
                  </td>
                  <td width="80px">{{ record.canUsedQuantity }}</td>
                  <td width="150px">{{ record.taskCode }}</td>
                  <td width="120px">{{ record.drawingCode }}</td>
                  <td width="100px">{{ record.materialName }}</td>
                  <td width="100px">{{ record.invFurBatch }}</td>
                  <td width="100px">{{ record.hgz_zjd }}</td>
                  <td width="100px">{{ record.paiHao }}</td>
                  <td width="120px">{{ record.hgzNo }}</td>
                  <td width="100px">{{ record.invCode }}</td>
                  <td width="100px">{{ record.materialSpec }}</td>
                  <td width="100px">{{ record.materialSize }}</td>
                </tr>
              </ng-template>
            </p-table>
            <div
              class="primeng-no-data"
              *ngIf="primengTableHelper.totalRecordsCount == 0"
            >
              没有找到适合的材料
            </div>
            <div class="primeng-paging-container">
              <p-paginator
                rows="5"
                #paginator1
                (onPageChange)="getmaterial($event)"
                [totalRecords]="primengTableHelper.totalRecordsCount"
                [rowsPerPageOptions]="[5]"
              >
              </p-paginator>
              <span class="total-records-count">
                总计：{{ primengTableHelper.totalRecordsCount }}
              </span>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button
            [disabled]="saving"
            type="button"
            class="btn btn-default"
            (click)="close()"
          >
            {{ l("Cancel") }}
          </button>
          <button
            type="submit"
            class="btn btn-primary blue"
            [buttonBusy]="saving"
            [busyText]="'绑定中...'"
          >
            <i class="fa fa-check-circle"></i>
            <span>绑定</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
